<template>
	<view class="content">
		<view class="box1">
			<view class="box1_01">

				<uni-search-bar class="shosuo" v-model="queryParams.nickName" placeholder="员工姓名" bgColor="#aaffff"
					@confirm="userxx" @cancel="userxx" @clear="userxx"></uni-search-bar>

				<view class="xiala">
					<uni-data-picker :readonly="onreadonly" :localdata="deptOptions" popup-title="请选择部门"
						placeholder="请选择部门" v-model="queryParams.deptId"
						:map="{ value: 'deptId', text: 'deptName', children: 'children' }"
						@change="onchange"></uni-data-picker>
				</view>
			</view>


		</view>
		<view class="box2">
			<view class="box2_01" v-for="list in userxqList">
				<view class="box2_01_01">
					<text class="ziti">姓名:{{list.nickName}}</text>
					<text>岗位:{{list.postName}}</text>
					<text>部门:{{list.deptName}}</text>

				</view>
				<view>
					<button style="background-color: #e3e3e3;" @click="tiaozhuan(list.userId)">月查看</button>
					<button type="primary" @click="tiaozhuan1(list.userId)">季查看</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		UserDetails
	} from "@/store/UserDetails.js"
	import {
		onMounted
	} from 'vue';
	import {
		listUserxq,
		listDeptPost
	} from '@/api/yuangong.js'
	const queryParams = ref({
		pageNum: 1,
		pageSize: 500,
		deptId: '',
		nickName: ''
	})
	const user = ref({})
	const userxqList = ref([])
	const deptOptions = ref([])
	const onreadonly = ref(false)
	//获取登录人信息
	const userxx = () => {
		let data = UserDetails()?.UserText?.data;
		if (data) {
			if (data.deptId === 1 || data.deptId === 100) {
				queryParams.value.deptId = '';
				onreadonly.value = false;
			} else {
				onreadonly.value = true;
				queryParams.value.deptId = data.deptId;
			}
		} else {
			queryParams.value.deptId = '';
		}
		getList()
	}
	//获取部门信息
	const getbumen = async () => {
		let data = await listDeptPost();
		deptOptions.value = data?.data;
		// console.log(deptOptions.value )
	}
	//下拉查询事件
	const onchange = (e) => {
		let data = e.detail.value[e.detail.value.length - 1]
		// console.log(data)
		if(data!==undefined){
				queryParams.value.deptId = data?.value;
		}else{
				queryParams.value.deptId = '';
		}
		getList();
	}
	//获取员工信息
	const getList = async () => {
		let data = await listUserxq(queryParams.value)
		userxqList.value = data.data?.list;
	}
	//查看
	const tiaozhuan = (userId) => {
		uni.navigateTo({
			url: `/pages/yue/yue?userId=${userId}`
		});
	}
	const tiaozhuan1 = (userId) => {
		uni.navigateTo({
			url: `/pages/jidu/jidu?userId=${userId}`
		});
	}
	//事件
	onMounted(() => {
		getbumen()
		userxx()
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100%;

		.box1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			height: 10%;
			background-color: #00ffff;

			.box1_01 {
				width: 90%;
				height: 100%;
				// border: 1px solid black;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.shosuo {
					width: 50%;
				}

				.xiala {
					width: 50%;
					// border: 1px solid black;
					color: #000;
				}
			}
		}

		.box2 {
			background-color: #aaffff;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.box2_01 {
				padding: 30rpx;
				width: 80%;
				height: 150rpx;
				// border: 1px solid black;
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: white;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.16);

				.box2_01_01 {
					display: flex;
					flex-direction: column;

					.ziti {
						font-size: 40rpx;
						width: 240rpx;
						height: 40rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>